<template>
	<Row class="function-tag">
        <ICol span="1">
            <Button  icon="ios-arrow-back" style="margin-top:2px;width: 100%;" @click="left"></Button>
        </ICol>
        <ICol span="21" class="tag-list" id="tag-list">
            <Tag v-for="(item,index) in $store.getters.route" :key="index"  :color="item.color" :closable="item.closable" :name="item.route" @on-close="closeTag" type="dot"><router-link  :to="item.route"> {{item.name}} </router-link> </Tag>
        </ICol>
        <ICol span="1">
            <Button  icon="ios-arrow-forward" style="margin-top: 2px;width: 100%;" @click="right"></Button>
        </ICol>
        <ICol span="1">
        	<Dropdown @on-click='close'>
            	<Button  icon="ios-close-circle-outline" style="margin-top: 2px;" @click="right"></Button>
            	<DropdownMenu slot="list">
		            <DropdownItem name='closeOther'>关闭其他</DropdownItem>
		            <DropdownItem name='closeAll'>关闭所有</DropdownItem>
		        </DropdownMenu>
            </Dropdown>
        </ICol>
    </Row>
</template>
<script>
	import {Row,Col,Icon,Tag,Button,Dropdown} from 'iview';

	export default {
		components:{
			Row,
			'ICol':Col,
			Icon,
			Tag,
			Button,
			Dropdown,
			'DropdownMenu' : Dropdown.Menu,
			'DropdownItem' : Dropdown.Item,
		},
		data () {
            return {
            	scrollWidth :0,
            }
        },
        methods:{
        	left(){
        		this.scrollWidth--;
        	},
        	right(){
        		this.scrollWidth++;
        	},
            closeTag(event, name){
                this.$store.dispatch('CHANGE_ROUTE',{route:name,action:2});
                this.jumpInRute();
            },
        	close(name){
                if(name=='closeOther'){
                    this.$store.dispatch('CHANGE_ROUTE',{action:3});
                }
                else if(name == 'closeAll'){
                    this.$store.dispatch('CHANGE_ROUTE',{action:4});
                }
                this.jumpInRute();                
        	},
            jumpInRute(){
                //路由跳转至指定的路由
                for(var i in this.$store.getters.route){
                    if(this.$store.getters.route[i].color=='primary'){
                        this.$router.push(this.$store.getters.route[i].route);
                    }
                }
            }
        },
        watch :{
        	scrollWidth(newValue,oldVue){
        		if(newValue>oldVue){
        			document.getElementById('tag-list').scrollLeft += 200;
        		}else{
        			document.getElementById('tag-list').scrollLeft -= 200;
        		}
        	}
        }
	}
</script>
<style>
    .function-tag{margin: 5px 15px; }
    .tag-list{
        height: 45px;overflow-y: hidden;overflow-x:auto;white-space: nowrap;
        scrollbar-arrow-color: #f4ae21;
        scrollbar-face-color: #333; 
        scrollbar-3dlight-color: #666; 
        scrollbar-highlight-color: #666; 
        scrollbar-shadow-color: #999;
        scrollbar-darkshadow-color: #666; 
        scrollbar-track-color: #666;
        scrollbar-base-color:#f8f8f8;
    }

    .tag-list::-webkit-scrollbar{
        width:4px;
        height:4px;
    }
    .tag-list::-webkit-scrollbar-track{
        background: #f6f6f6;
        border-radius:2px;
    }
    .tag-list::-webkit-scrollbar-thumb{
        background: #aaa;
        border-radius:2px;
    }
    .tag-list::-webkit-scrollbar-thumb:hover{
        background: #747474;
    }
    .tag-list::-webkit-scrollbar-corner{
        background: #f6f6f6;
    }
    .tag-list .ivu-tag{position: relative;display: inline-block;}
    .tag-list .ivu-tag-text a,.tag-list .ivu-tag-text a:hover{color: #515a6e;}
</style>